<html>
	<head>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

		<script language="Javascript">

			$(window).load(function(){

				var api = $.Jcrop('#cropbox',{
					setSelect: [ 100, 100, 200, 200 ]
				});
				var i, ac;

				// A handler to kill the action
				function nothing(e)
				{
					e.stopPropagation();
					e.preventDefault();
					return false;
				};

				// Returns event handler for animation callback
				function anim_handler(ac)
				{
					return function(e) {
						api.animateTo(ac);
						return nothing(e);
					};
				};

				// Setup some coordinates for animation
				var ac =
				{
					anim1: [50,50,450,320],
					anim2: [74,81,218,228],
					anim3: [8,8,32,360],
					anim4: [316,150,470,230],
					anim5: [80,160,500,190]
				};

				// Attach respective event handlers
				for(i in ac) jQuery('#'+i).click(anim_handler(ac[i]));

				// Attach another one manually, to demonstrate "set" w/o animation
				jQuery('#setsel').click(function(e) {
					api.setSelect( [ 200, 200, 300, 300 ] );
					return nothing(e);
				});

			});

		</script>

	</head>

	<body>
		<div id="outer">
		<div class="jcExample">
		<div class="article">

			<h1>Jcrop - API Demo</h1>
			<img src="demo_files/flowers.jpg" id="cropbox" />

			<div style="margin: 20px 0;">
				<button id="anim1">A1</button>
				<button id="anim2">A2</button>
				<button id="anim3">A3</button>
				<button id="anim4">A4</button>
				<button id="anim5">A5</button>
				<button id="setsel">Set</button>
			</div>

			<p>
				<b>API feature demonstration.</b>
				Press the buttons above to animate different selections.
				This was the original API demo, before additional API functionality
				was added (see Advanced API demo).
			</p>

		<div id="dl_links">
			<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
			<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
		</div>

		</div>
		</div>
		</div>
	</body>
</html>

